<style lang='scss' scoped>
.noticelist{ 
 .container{
    width: 100%;
    margin-top: 1rem;
     ul{  
         li{
             padding: 0 0.5rem;
             margin-bottom:0.25rem;
             text-align:justify;
             background: #fff;
            
             .notice_title,.notice_content{
                 padding: 0.275rem 0; 
             }
             .notice_title{
                 border-bottom: 0.025rem solid rgb(230, 230, 230); 
                 cursor: pointer;
             }
             h2{
                font-size:0.35rem;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:0.5rem;
            }
             .creator{
                font-size:0.3rem;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(153,153,153,1);
                line-height:0.425rem; 
                .creator_name{
                    float: left;
                }
                .noticedata{
                    float: right;
                }
            }
         }
     }
 }
}
</style>
<template>
    <div class="noticelist">
     <headTop :theRouter="therouter"></headTop>
     <div class="container">
         <ul class="container_list">
             <li class="list_li" v-for="(item,index) in noticeList" :key='index' @click="entranceBtn(item)">
                <div class="notice_title">
                    <h2>{{item.notice_title}}</h2>
                </div>
                <div class="notice_content">
                    <div class="creator fn-clear">
                       <span class="creator_name">{{item.creator_id}}</span>
                       <span class="noticedata">{{item.create_time.substring(0,10)}}</span></div>
                </div>
             </li>
             <infinite-loading @infinite="loadMore">
                <span slot="no-more">没有更多了</span>
            </infinite-loading>
         </ul>
     </div>
    </div>
</template>
<script>
import { BASEURL } from './../../api/api'
import axios from 'axios'
import headTop from "./../common/header"
import InfiniteLoading from 'vue-infinite-loading'
export default {
    name:'noticelist',
    components: {
     headTop, 
     InfiniteLoading
    },
    data(){
        return{	
            noticeList:[],
            pageNo:0,
            pageSize:10,
        }
    },
    methods: {
        loadMore($state){
            this.pageNo = this.pageNo+1;
            this.init($state);
        },
        init($state){
			let _this = this
			axios.get(BASEURL + 'getNoticeList?pageSize='+this.pageSize+'&pageNo='+this.pageNo,{
            })
            .then(res=>{
                if(res.data.noticeList.length < this.pageSize){
                 $state.complete();
                }
                _this.noticeList = this.noticeList.concat(res.data.noticeList);
                $state.loaded();
			}).catch(function (error) {
				console.log(error);
            })
		},
		entranceBtn(item){
            let _this = this
            _this.$store.commit('saveNoticeId', item.notice_id);
			_this.$router.push({ path: '/' + 'noticedetails', force: true });
        }
    },
    computed: {
	    therouter: function() {
	      return this.$route
	    }
    },
	mounted(){
		let _this = this
		//this.init()
	}
} 
</script>


